<template>
    <h3>componentB</h3>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateHandler">按钮</button>
</template>
<script>
export default{
    data() {
        return {
            
        }
    },
    // props是只读的
    props:{
        title:{
            type:[String,Number,Array,Object],
            //必选项
            required: true
        },
        age:{
            type:Number,
            default:0
        },
        names:{
            type:Array,
            default(){
                return ["空"]
            }
        }
        // 字符串 数字可以用default,数组对象需要通过工厂函数返回
    },
    methods: {
        updateHandler(){
            console.log(this.title);
            this.title= "修改标题111"
        }
    },
}
</script>